<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<script>
	var search_type_student = "none";
	var search_keyWord = "";
	var selectID;

	$(function() {
		searchAction();
		studentListInit();
		bootstrapValidatorInit();
		addstudentAction();
	})

	// 搜索动作
	function searchAction() {
		$('#search_button').click(function() {
			search_keyWord = $('#search_input').val();
			tableRefresh();
		})
	}

	// 分页查询参数
	function queryParams(params) {
		var temp = {
			limit : params.limit,
			offset : params.offset,
            grade : $('#grade').val(),
            phone : $('#phone').val(),
            linkman:$('#linkman').val(),
            name:$('#name').val()
		}
		return temp;
	}

	// 表格初始化
	function studentListInit() {
		$('#studentList').bootstrapTable(
            {
                columns : [{
					   checkbox: true,
                       align: 'center'
                    }, {
                       title: 'ID',
                       formatter: function (value, row, index) {
                           return index+1;
                        },
                        align: "center"
                    },
                    {
                        field : 'student_name',
                        title : '学生姓名'
                    },
                    {
                        field : 'student_sex',
                        title : '性别'
                    },
                    {
                        field : 'student_grade',
                        title : '年级'
                    },
                    {
                        field : 'linkman',
                        title : '联系人'
                    },
                    {
                        field : 'phone',
                        title : '联系电话'
                    },
                    {
                        field : 'address',
                        title : '地址',
                    },
                    {
                        field : 'create_time',
                        title : '报名时间',
                    } ],
                url : '/onlineEdu/student/getStudentByPage',
                onLoadError:function(status){
                    handleAjaxError(status);
                },
                method : 'GET',
                queryParams : queryParams,
                sidePagination : "server",
                dataType : 'json',
                pagination : true,
                pageNumber : 1,
                pageSize: 10,
                pageList : [5, 10, 25, 50, 100 ],
                clickToSelect : true
            });
	}

	// 表格刷新
	function tableRefresh() {
		$('#studentList').bootstrapTable('refresh', {
			query : {}
		});
	}

	// 添加学生信息
	function addstudentAction() {
		$('#add_student').click(function() {
			$('#add_modal').modal("show");
		});

		$('#add_modal_submit').click(function() {
			var data = {
				name : $('#student_name').val(),
				personInCharge : $('#student_person').val(),
				tel : $('#student_tel').val(),
				email : $('#student_email').val(),
				address : $('#student_address').val()
			}
			// ajax
			$.ajax({
				type : "POST",
				url : "studentManage/addstudent",
				dataType : "json",
				contentType : "application/json",
				data : JSON.stringify(data),
				success : function(response) {
					$('#add_modal').modal("hide");
					var msg;
					var type;
					var append = '';
					if (response.result == "success") {
						type = "success";
						msg = "学生添加成功";
					} else if (response.result == "error") {
						type = "error";
						msg = "学生添加失败";
					}
					showMsg(type, msg, append);
					tableRefresh();

					// reset
					$('#student_form').bootstrapValidator("resetForm", true);
				},
				error : function(xhr, textStatus, errorThrown) {
					$('#add_modal').modal("hide");
					// handle error
					handleAjaxError(xhr.status);
				}
			})
		})
	}

</script>
<div class="panel panel-default">
	<ol class="breadcrumb">
		<li><label class="form-label">学生信息管理</label></li>
	</ol>
	<div class="panel-body">
		<div class="row">
				<div style="width: 100%;margin-top: -16px" class="box-content">
					<table id="" class="table table-bordered table-hover table-responsive">
						<tbody>
						<tr>
							<td class="item-title" align="center">姓名</td>
							<td class="item-content-half">
								<input type="text" class="form-control" id="name" placeholder="">
							</td>
							<td class="item-title" align="center">年级</td>
							<td class="item-content-half">
								<input type="text" class="form-control" id="grade" placeholder="">
							</td>
							<td class="item-title" align="center">电话</td>
							<td class="item-content-half">
								<input type="text" class="form-control" id="phone" placeholder="">
							</td>
							<td class="item-title" align="center">联系人</td>
							<td class="item-content-half">
								<input type="text" class="form-control" id="linkman" placeholder="">
							</td>
						</tr>
						</tbody>
					</table>
				</div>

		<%--</div>--%>
		</div>
		<div style="text-align: right">
			<button id="search_button" style="text-align: right" class="btn btn-success">
				<span class="glyphicon glyphicon-search"></span> <span>查询</span>
			</button>
		</div>
	    </div>
		<div class="row" style="margin-top: 15px">
			<div class="col-md-12">
				<table id="studentList" class="table table-striped"></table>
			</div>
		</div>
	</div>
</div>

<!-- 添加学生信息模态框 -->
<div id="add_modal" class="modal fade" table-index="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true"
	data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel11">添加学生信息</h4>
			</div>
			<div class="modal-body">
				<!-- 模态框的内容 -->
				<div class="row">
					<div class="col-md-1 col-sm-1"></div>
					<div class="col-md-8 col-sm-8">
						<form class="form-horizontal" role="form" id="student_form"
							style="margin-top: 25px">
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>学生名称：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="student_name"
										name="student_name" placeholder="学生名称">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>负责人姓名：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="student_person"
										name="student_person" placeholder="负责人姓名">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>联系电话：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="student_tel"
										name="student_tel" placeholder="联系电话">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>电子邮件：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="student_email"
										name="student_email" placeholder="电子邮件">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>联系地址：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="student_address"
										name="student_address" placeholder="联系地址">
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-1 col-sm-1"></div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" type="button" data-dismiss="modal">
					<span>取消</span>
				</button>
				<button class="btn btn-success" type="button" id="add_modal_submit">
					<span>提交</span>
				</button>
			</div>
		</div>
	</div>
</div>

<!-- 导入学生信息模态框 -->
<div class="modal fade" id="import_modal" table-index="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true"
	data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabele">导入学生信息</h4>
			</div>
			<div class="modal-body">
				<div id="step1">
					<div class="row" style="margin-top: 15px">
						<div class="col-md-1 col-sm-1"></div>
						<div class="col-md-10 col-sm-10">
							<div>
								<h4>点击下面的下载按钮，下载学生信息电子表格</h4>
							</div>
							<div style="margin-top: 30px; margin-buttom: 15px">
								<a class="btn btn-info"
									href="commons/fileSource/download/studentInfo.xlsx"
									target="_blank"> <span class="glyphicon glyphicon-download"></span>
									<span>下载</span>
								</a>
							</div>
						</div>
					</div>
				</div>
				<div id="step2" class="hide">
					<div class="row" style="margin-top: 15px">
						<div class="col-md-1 col-sm-1"></div>
						<div class="col-md-10 col-sm-10">
							<div>
								<h4>请按照学生信息电子表格中指定的格式填写需要添加的一个或多个学生信息</h4>
							</div>
							<div class="alert alert-info"
								style="margin-top: 10px; margin-buttom: 30px">
								<p>注意：表格中各个列均不能为空，若存在未填写的项，则该条信息将不能成功导入</p>
							</div>
						</div>
					</div>
				</div>
				<div id="step3" class="hide">
					<div class="row" style="margin-top: 15px">
						<div class="col-md-1 col-sm-1"></div>
						<div class="col-md-8 col-sm-10">
							<div>
								<div>
									<h4>请点击下面上传文件按钮，上传填写好的学生信息电子表格</h4>
								</div>
								<div style="margin-top: 30px; margin-buttom: 15px">
									<span class="btn btn-info btn-file"> <span> <span
											class="glyphicon glyphicon-upload"></span> <span>上传文件</span>
									</span> 
									<form id="import_file_upload"><input type="file" id="file" name="file"></form>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="hide" id="uploading">
					<div class="row" style="margin-top: 15px" id="import_progress_bar">
						<div class="col-md-1 col-sm-1"></div>
						<div class="col-md-10 col-sm-10"
							style="margin-top: 30px; margin-bottom: 30px">
							<div class="progress progress-striped active">
								<div class="progress-bar progress-bar-success"
									role="progreessbar" aria-valuenow="60" aria-valuemin="0"
									aria-valuemax="100" style="width: 100%;">
									<span class="sr-only">请稍后...</span>
								</div>
							</div>
							<!-- 
							<div style="text-align: center">
								<h4 id="import_info"></h4>
							</div>
							 -->
						</div>
						<div class="col-md-1"></div>
					</div>
					<div class="row">
						<div class="col-md-4"></div>
						<div class="col-md-4">
							<div id="import_result" class="hide">
								<div id="import_success" class="hide" style="text-align: center;">
									<img src="" alt=""
										style="width: 100px; height: 100px;">
								</div>
								<div id="import_error" class="hide" style="text-align: center;">
									<img src="" alt=""
										style="width: 100px; height: 100px;">
								</div>
							</div>
						</div>
						<div class="col-md-4"></div>
					</div>
					<div class="row" style="margin-top: 10px">
						<div class="col-md-3 col-sm-3"></div>
						<div class="col-md-6 col-sm-6" style="text-align: center;">
							<h4 id="import_info"></h4>
						</div>
						<div class="col-md-3 col-sm-3"></div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn ben-default" type="button" id="previous">
					<span>上一步</span>
				</button>
				<button class="btn btn-success" type="button" id="next">
					<span>下一步</span>
				</button>
				<button class="btn btn-success hide" type="button" id="submit">
					<span>&nbsp;&nbsp;&nbsp;提交&nbsp;&nbsp;&nbsp;</span>
				</button>
				<button class="btn btn-success hide disabled" type="button"
					id="confirm" data-dismiss="modal">
					<span>&nbsp;&nbsp;&nbsp;确认&nbsp;&nbsp;&nbsp;</span>
				</button>
			</div>
		</div>
	</div>
</div>

<!-- 导出学生信息模态框 -->
<div class="modal fade" id="export_modal" table-index="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true"
	data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabeli">导出学生信息</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-3 col-sm-3" style="text-align: center;">
						<img src="" alt=""
							style="width: 70px; height: 70px; margin-top: 20px;">
					</div>
					<div class="col-md-8 col-sm-8">
						<h3>是否确认导出学生信息</h3>
						<p>(注意：请确定要导出的学生信息，导出的内容为当前列表的搜索结果)</p>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" type="button" data-dismiss="modal">
					<span>取消</span>
				</button>
				<button class="btn btn-success" type="button" id="export_student_download">
					<span>确认下载</span>
				</button>
			</div>
		</div>
	</div>
</div>

<!-- 删除提示模态框 -->
<div class="modal fade" id="deleteWarning_modal" table-index="-1"
	role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabelee">警告</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-3 col-sm-3" style="text-align: center;">
						<img src="" alt=""
							style="width: 70px; height: 70px; margin-top: 20px;">
					</div>
					<div class="col-md-8 col-sm-8">
						<h3>是否确认删除该条学生信息</h3>
						<p>(注意：若该学生已经有仓库入库记录，则该学生信息将不能删除成功。如需删除该学生的信息，请先删除该学生的入库记录)</p>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" type="button" data-dismiss="modal">
					<span>取消</span>
				</button>
				<button class="btn btn-danger" type="button" id="delete_confirm">
					<span>确认删除</span>
				</button>
			</div>
		</div>
	</div>
</div>

<!-- 编辑学生信息模态框 -->
<div id="edit_modal" class="modal fade" table-index="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true"
	data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">编辑学生信息</h4>
			</div>
			<div class="modal-body">
				<!-- 模态框的内容 -->
				<div class="row">
					<div class="col-md-1 col-sm-1"></div>
					<div class="col-md-8 col-sm-8">
						<form class="form-horizontal" role="form" id="student_form_edit"
							style="margin-top: 25px">
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>学生名称：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="student_name_edit"
										name="student_name" placeholder="学生名称">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>负责人姓名：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control"
										id="student_person_edit" name="student_person"
										placeholder="负责人姓名">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>联系电话：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="student_tel_edit"
										name="student_tel" placeholder="联系电话">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>电子邮件：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control"
										id="student_email_edit" name="student_email"
										placeholder="电子邮件">
								</div>
							</div>
							<div class="form-group">
								<label  class="control-label col-md-4 col-sm-4"> <span>联系地址：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control"
										id="student_address_edit" name="student_address"
										placeholder="联系地址">
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-1 col-sm-1"></div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" type="button" data-dismiss="modal">
					<span>取消</span>
				</button>
				<button class="btn btn-success" type="button" id="edit_modal_submit">
					<span>确认更改</span>
				</button>
			</div>
		</div>
	</div>
</div>